<script lang="ts" setup>
import { ref,inject } from 'vue';
const cart = inject('cart') as {
items: Product[];
addItem: (product: Product) => void;
};
function addToCart(){
cart.addItem(props.product);
};
export interface Product{
id: number;
name: string;
describe: string;
price: number;
isHot?: boolean;
quantity?: number; // 只在购物车中使用
}
const props = defineProps<{
product: Product;
}>();
</script>
<template>
<button class="cart-button" @click="addToCart()">
<span>+</span>
</button>
</template>
<style scoped>
.cart-button {
padding:4px 8px;
background-color:rgb(187, 44, 0);
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
position:absolute;
right:10px;
bottom:20px;
}
.cart-button:hover {
background-color:rgb(241, 82, 54);
}</style>